<template>
  <div class="abnormalStatistics-box">
    <div class="title">
      <div @click="goYCZLPage">
        <span></span>
        <span>异常统计：{{tableData.abnormalStatistics}}</span>
      </div>
      <div  @click="goXJBGPage">
        <span></span>
        <span>未处理报告：{{tableData.undoneReport}}</span>
      </div>
    </div>
    <div class="main colcenterbox" id="scroller1">
      <!-- <div class="text-box">
        <div class="item" v-for="(o,i) in tableData.list" :key="i">
          <span>{{o.BDZNAME+o.RESULTS}}</span>
        </div>
      </div>-->
      <div class="marquee_box">
        <ul class="marquee_list" :class="{marquee_top:animate}">
          <li
            :class="index%2==0?'lione':'litwo'"
            v-for="(item, index) in newTableData"
            :key="index"
            @click="goDutyPage(item)"
          >
            <span :title="item.BDZNAME" v-html="item.BDZNAME.length>10?item.BDZNAME.slice(0,12)+'...':item.BDZNAME"></span>
            <span :title="item.RESULTS" v-html="item.RESULTS.length>10?item.RESULTS.slice(0,11)+'...':item.RESULTS"></span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import lodash from "lodash";
@Component
export default class extends Vue {
  // 后台获取数据
  tableData = {
    abnormalStatistics: 0,
    undoneReport: 0,
    list: [
      // {
      //   BDZNAME: "1",
      //   RESULTS: "2",
      // },
    ],
  };
  private scrollTimer; // 滚动定时器
  private dutyData = [50, 0, 0];
  private animate: boolean = false;
  // 异常信息及待办主动提醒数据获取
  getBlackLog() {
    (this as any).$services
      .getBlackLog()
      .then((result: any) => {
        // console.log(result);
        if (result.data) {
          let data = result.data;
          let ycNum = data.ycNum[0] || {};
          let bgNum = data.bgNum[0] || {};
          this.tableData.list = data.backLog;
          this.tableData.abnormalStatistics = ycNum.NUM || 0;
          this.tableData.undoneReport = bgNum.NUM || 0;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  get newTableData() {
    // real
    if (this.tableData.list.length > 6) {
      this.openIntercal();
    } else {
      this.closeInterval();
    }
    return this.tableData.list;
    // test
    // var list = [];
    // for (var i = 0; i < 15; i++) {
    //   list.push({
    //     BDZNAME: "1",
    //     RESULTS: "2",
    //   });
    // }
    // if (list.length > 6) {
    //   this.openIntercal();
    // } else {
    //   this.closeInterval();
    // }
    // return list;
  }

  
  // 点击异常统计数字跳转到巡检报告
  private goXJBGPage() { 
    this.$router.push({
      path: "inspectionreport",
      query: { xjbg: '0',startTime:'',endTime:''},
    });
  }

  // 点击异常统计数字跳转到异常总览
  private goYCZLPage() { 
    this.$router.push({
      path: "abnormalstatistics",
      query: { yczl: '0' ,sfqr:'0'},
    });
  }

  // 开启定时滚动
  private openIntercal() {
    if (this.scrollTimer === undefined) {
      // 启动滚动
      this.scrollTimer = setInterval(this.showMarquee, 2000);
    }
  }

  // 关闭定时滚动
  private closeInterval() {
    if (this.scrollTimer) {
      clearInterval(this.scrollTimer);
      this.scrollTimer = undefined;
    }
  }

  // 滚动机制
  private showMarquee() {
    this.animate = true;
    setTimeout(() => {
      this.tableData.list.push(this.tableData.list[0]);
      this.tableData.list.shift();
      this.animate = false;
    }, 500);
  }

  // 点击一条数据跳转到异常总览
  private goDutyPage(dutyData: any) { 
    console.log(dutyData);
    
    this.$router.push({
      name: "abnormalstatistics",
      query: { BDZID: dutyData.BDZID,sfqr:'0' },
    });
  }

  mounted() {
    this.getBlackLog();
    var scroller = document.getElementById("scroller1");
    // 鼠标移入滚动列表，关闭定时器
    scroller.onmouseover = () => {
      this.closeInterval();
    };
    // 鼠标移出滚动列表，判断是否关闭定时器
    scroller.onmouseout = () => {
      if (this.tableData.list.length > 6) {
        this.openIntercal();
      } else {
        this.closeInterval();
      }
    };
  }
}
</script>

<style lang="scss" scoped>
.abnormalStatistics-box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 0.25rem;
  background: rgba(2, 29, 84, 1);
  border: 1px solid rgba(0, 231, 255, 1);
  border-radius: 6px;
  .title {
    cursor: pointer;
    width: 100%;
    height: 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.15rem;
    > div {
      width: 50%;
      display: flex;
      // justify-content: center;
      align-items: center;
      span:first-child {
        display: inline-block;
        width: 0.2rem;
        height: 0.2rem;
        background: url("../../../../assets/img/JointInspection/abnormal_icon.png")
          no-repeat center center;
        background-size: 100% 100%;
      }
      span:last-child {
        font-size: 18px;
        margin-left: 0.1rem;
      }
    }
    > div:last-child {
      // margin-left: 0.25rem;
      span:first-child {
        background: url("../../../../assets/img/JointInspection/undone_icon.png")
          no-repeat center center;
        background-size: 100% 100%;
      }
    }
  }
  .main {
    width: 100%;
    height: calc(100% - 0.4rem);
    box-sizing: border-box;
    .text-box {
      width: 100%;
      height: calc(100% - 0.3rem);
      // margin-top: 0.1rem;
      overflow: auto;
      .item {
        height: 0.3rem;
        width: 100%;
        background: #05285f;
        // display: flex;
        // justify-content: flex-start;
        // align-items: center;
        line-height: 0.3rem;
        padding: 0.02rem 0.2rem;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        span {
          font-size: 0.18rem;
        }
      }
      .item:nth-child(odd) {
        background: #09336a;
      }
      .item:nth-child(even) {
        height: 0.47rem;
        line-height: 0.47rem;
        background: #021d54;
      }
      .item:hover {
        background: #272069;
      }
    }
    /* 滚屏 */
    .marquee_box {
      display: block;
      position: relative;
      width: 100%;
      flex: 1;
      overflow: hidden;
      .marquee_list {
        width: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        
        .lione {
          // background-color: gray;

        }
        .litwo {
          // background-color: hotpink;
        }
      }
      .marquee_top {
        transition: all 0.5s;
        margin-top: -0.3rem;
      }
      .marquee_list li {
        height: 0.3rem;
        line-height: 0.3rem;
        font-size: 0.16rem;
        width: 100%;
        display: flex;
        // justify-content: space-around;
        cursor: pointer;
      }
      .marquee_list li:hover {
        background-color: rgb(1, 71, 147);
      }
      .marquee_list li span {
        // text-align: center;
        width: 50%;
        padding-left: 0.1rem;
        box-sizing: border-box;
      }
      .spanPadding{
        // padding-left: 0.25rem;
      }
    }
  }
}
</style>

